<!--类型切换-->
<script setup>
const props = defineProps({
  tabs: {
    type: Array,
    default: () => []
  },
  value: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['input'])
const modelValue = ref(props.value)
watch(
  () => props.value,
  (newValue) => {
    modelValue.value = newValue
  }
)
// onTap
const onTap = (item) => {
  modelValue.value = item.value
  emit('changeTab', item.value)
  emit('input', item.value)
}
</script>

<template>
  <div class="flex items-center justify-start py-16px">
    <div
      v-for="item in tabs"
      :key="item.name"
      :class="
        modelValue === item.value
          ? 'text-#229F60 border-#229F60'
          : 'border-#9DA0A4 text-#1E2226'
      "
      class="w-auto px-15px py-3px select-none mr-10px border-solid border-1 rounded-12px font-400 text-12px letter-spacing-0"
      @click="onTap(item)"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<style scoped lang="less"></style>
